<template>
  <div>
    <topBar />
    <div class="content-container">
      <div class="content-title">
        <div></div>
        <div class="" @click="showDetailDrawer"><a-button type="primary"><span
              style="margin-right:5px;">+</span>添加楼宇</a-button></div>
      </div>
      <!-- <louyuTable /> -->
      <a-drawer v-model:open="showLoucengDrawer" class="custom-class" width="800" root-class-name="root-class-name"
        :root-style="{ color: 'blue' }" style="color: red" title="2-楼层管理" placement="right"
        @after-open-change="afterOpenChange">
        <div class="loucengguangli-title">
          <div style="color: #929292;">楼层列表</div>
        <a-button type="primary" style="margin-top: 20px; margin-bottom: 20px">
          添加楼层
        </a-button>
        </div>
        <a-table :columns="telcolumns" :data-source="teldata" bordered>
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
            <template v-else-if="column.dataIndex === 'address'">
              <span>
                <a @click="showDetailDrawer" style="margin-right: 10px;">编辑</a>
                <a @click="showLoucengDrawerMethod">楼层管理</a>
                <a style="color: red; margin-left: 10px" @click="showConfirm">删除</a>
                <down-outlined />
              </span>
            </template>
          </template>
        </a-table>
      </a-drawer>
      <a-drawer v-model:open="Detailopen" title="项目详情" width="800" :closable="false"
        :footer-style="{ textAlign: 'right' }" @close="onClose">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="基础配置">
            <div class="detail-table-title">
              <i></i>基本信息
            </div>
            <div>
              <a-form style="margin-bottom: 20px;" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">所属项目</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">楼宇编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">楼宇名称</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">所属地区</div>
                    <div style="width: 500ox">
                      <a-cascader v-model:value="value" :options="Regionoptions" placeholder="Please select"
                        style="width: 490px" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">楼宇地址</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">产权性质</div>
                    <div>
                      <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                        @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">不动产证编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">产权编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">土地编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">排序值</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
              </a-form>
            </div>
            <div class="detail-table-title">
              <i></i>楼宇面积
            </div>
            <div>
              <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">所属项目</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">楼宇编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">楼宇名称</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">产权性质</div>
                    <div>
                      <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                        @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">不动产证编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                  <div class="formItem">
                    <div class="formTitle">产权编号</div>
                    <div>
                      <a-input v-model:value="formState.username" />
                    </div>
                  </div>
                </div>
              </a-form>
            </div>
            <div class="detail-table-title" style="margin-top: 20px;">
              <i></i>默认收支账户
            </div>
            <div>
              <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <div class="topItem">
                  <div class="formItem">
                    <div class="formTitle">选择账户</div>
                    <div>
                      <a-select ref="select" v-model:value="value1" style="width: 100%" @focus="focus"
                        @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>
              </a-form>
            </div>
          </a-tab-pane>

          <!-- 项目详情里的拓展信息 -->
          <a-tab-pane key="2" tab="拓展信息" force-render>
            <titleBar titleName="拓展信息" />
            <div class="topItem">
              <div class="tuozhangFormItem">
                <div style="display:flex;justify-content: space-between;">
                  <div class="formTitle">总楼层</div>
                  <div class="formTitle"><a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox></div>
                </div>

                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
              <div class="tuozhangFormItem">
                <div class="formTitle">楼宇标签</div>
                <div>
                  <a-input v-model:value="formState.username" />
                </div>
              </div>
            </div>
            <div class="tuozhang-image">
              <div class="tuozhang-title">图片</div>
              <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
                :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload" @change="handleChange">
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
              <div class="tuozhang-title">设备支持</div>
              <div>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
                <a-checkbox v-model:checked="formState.remember">热门楼宇</a-checkbox>
              </div>
              <div class="tuozhang-title">楼宇介绍</div>

            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="营收目标">
            <div class="addTarget" style="margin-bottom:10px"><a-button type="primary"><span
                  style="margin-right:5px;">+</span>添加目标</a-button></div>
            <a-table :dataSource="addDataSource" :columns="addColumns" bordered />
          </a-tab-pane>
        </a-tabs>


        <template #footer>
          <!-- <a-button style="margin-right: 6px" @click="onClose" disabled>上一项</a-button>
      <a-button style="margin-right: 556px" @click="onClose">下一项</a-button> -->
          <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
          <a-button type="primary" @click="onClose">提交</a-button>
        </template>
      </a-drawer>
      <a-drawer v-model:open="open" class="custom-class" width="800" root-class-name="root-class-name"
        :root-style="{ color: 'blue' }" style="color: red" title="项目常用电话" placement="right"
        @after-open-change="afterOpenChange">
        <a-tag color="processing" closable style="height: 50px; line-height: 50px; width: 100%; font-size: 14px"
          @close="log">
          将展示在用户移动端的"常用电话"页面。如果项目不使用用户移动端，则无需添加。
        </a-tag>
        <a-button type="primary" style="margin-top: 20px; margin-bottom: 20px">
          添加分类
        </a-button>
        <a-table :columns="telcolumns" :data-source="teldata" bordered>
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
        </a-table>
      </a-drawer>
      
      <a-table :columns="columns" :data-source="data" :scroll="{ x: 1900, y: 300 }">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              楼宇名称
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            {{ record.name }}
          </template>
          <template v-if="column.key === 'tel'">
            <a @click="showDrawer">查看</a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag v-for="tag in record.tags" :key="tag" :color="tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                  ? 'geekblue'
                  : 'green'
                ">
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="showDetailDrawer" style="margin-right: 10px;">编辑</a>
              <a @click="showLoucengDrawerMethod">楼层管理</a>
              <a style="color: red; margin-left: 10px" @click="showConfirm">删除</a>
              <down-outlined />
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>


</script>

<script>
import topBar from '@/views/louyu/components/topBar.vue'

import titleBar from './components/titleBar.vue'
export default {
  name: 'index',
  components: { topBar, titleBar },
}
</script>
<script setup>
import { ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
const handleChange = info => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, base64Url => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};
const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const Regionoptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];



const formState = reactive({
  username: '',
  password: '',
  remember: true,
});
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

const Detailopen = ref(false);

const showLoucengDrawer = ref(false);
const showLoucengDrawerMethod = () => {
  showLoucengDrawer.value = true;
};
const onLoucengClose = () => {
  showLoucengDrawer.value = false;
};


const showDetailDrawer = () => {
  Detailopen.value = true;
};
const onClose = () => {
  Detailopen.value = false;
};

const telcolumns = [
  {
    title: '楼层数字编号',
    className: 'column-money',
    width:170,
    dataIndex: 'money',
  },
  {
    title: '楼层名称',
    dataIndex: 'loucengName',
  },
  {
    title: '楼层可视化',
    dataIndex: 'loucengView',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
]
const teldata = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
]

const showConfirm = () => {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content:
      'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      }).catch(() => console.log('Oops errors!'))
    },
    onCancel() { },
  })
}
const log = (e) => {
  console.log(e)
}
const open = ref(false)
const afterOpenChange = (bool) => {
  console.log('open', bool)
}
const showDrawer = () => {
  open.value = true
}
const columns = [
  {
    name: '楼宇名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    fixed: 'left',
  },
  {
    title: '所属项目',
    dataIndex: 'age',
    width: 150,
    key: 'age',
  },
  {
    title: '楼宇编号',
    dataIndex: 'zhaoshang',
    width: 150,

    key: 'zhaoshang',
  },
  {
    title: '楼宇标签',
    key: 'fangyuan',
    width: 150,

    dataIndex: 'fangyuan',
  },
  {
    title: '建筑面积（㎡）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '可租面积	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '管理面积（㎡）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '房间总数（间）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '出租率（%）	',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '在租面积（㎡）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '在租合同数（份）',
    key: 'kefangyuan',
    width: 150,
    dataIndex: 'kefangyuan',
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
]
const data = [
  {
    key: '1',
    name: '项目2',
    age: 32,
    tel: 122121,
    zhaoshang: 21,
    fangyuan: 0,
    kefangyuan: 0,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
]
</script>
<style lang="less" scoped>

.loucengguangli-title{
  
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addTarget {
  display: flex;
  width: 100%;
  justify-content: flex-end;

}

.tuozhang-title {
  margin-top: 20px;
}

.tuozhangFormItem {
  width: 360px;

  .formTitle {
    margin-bottom: 10px;
  }
}

.topItem {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .formItem {
    width: 240px;

    .formTitle {
      margin-bottom: 10px;
    }
  }
}

.detail-table-title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  i {
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
    background-color: #2681f3;
  }
}

.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.content-container {
  background-color: #fff;
  margin-top: 20px;
}

.content-title {
  display: flex;
  padding: 10px 20px 10px 20px;
  align-items: center;
  justify-content: space-between;
}</style>
